<template>
  <div class="loginWra">
    <!-- <img class="loginBg" src="../assets/img/fuckBg.png" alt=""> -->
    <div class="loginInpWra">
      <img class="text" src="../assets/img/fuckText.png" alt="">
      <img class="textOne" src="../assets/img/loginInputBg.png" alt="">
      <div class="inpWra">
        <div class="inpCon One"><img src="../assets/img/username.png" alt=""><input v-model="userName" v-focus type="text" placeholder="请输入用户名"></div>
        <div class="inpCon Two"><img src="../assets/img/lock.png" alt=""><input v-model="uesrPass" type="password" placeholder="请输入密码" @keyup.enter="login"></div>
        <div class="inpBtn" @click="login"><img src="../assets/img/inpBtn.png" alt=""></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    name:'login',
    data(){
      return{
        userName:'',
        uesrPass:'',
        loadingImg:'',
      }
    },
    directives : {
      focus:{
        inserted:function(el){
          el.focus();
        }
      }
    },
    created(){
    },
    methods:{
      login(){
        if(this.userName == ''){
            this.$message({
                type: 'info',
                message: '请输入用户名',
                duration:2000
            });
            return false;
        }
        if(this.uesrPass == ''){
            this.$message({
                type: 'info',
                message: '密码不能为空',
                duration:2000
            });
            return false;
        }
        this.loadingImg = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$http({
          method:'post',
          url:this.apiUrl.mogenUserLogin,
          data:{name:this.userName,pwd:this.uesrPass}
        }).then(res=>{
          this.loadingImg.close(); 
          if(res.data.status==1){
              console.log(res)
              var data = res.data;
              this.set_storage('userName', data.nick);
              this.set_storage('userId', data.userId);
              this.set_storage('userType', data.type);
              this.setCookie('userId',data.userId,1);
              this.$router.push({path: '/index'});    
          }else{
              this.$message({
                  type: 'error',
                  message: res.data.message,
                  duration:2000
              });
          }
        }).catch()
      },
    }
  }
</script>
<style>
.loginWra{
  width: 100%;
  height: 100%;
  position: relative;
  background: url('../assets/img/fuckBg.jpg') no-repeat;
  background-size: 100% 100%;
  min-width: 500px;
  min-height: 540px;
}
.loginWra .loginBg{
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.loginWra .loginInpWra{
  width: 560px;
  height: 300px;
  position: absolute;
  margin: auto;
  top: 35px;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 20px;
}
.loginWra .loginInpWra .textOne {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.loginWra .loginInpWra .text {
  position: absolute;
  width: 420px;
  left: 50%;
  top:-100px;
  transform: translateX(-50%);
  vertical-align: middle;
}
.loginWra .loginInpWra .inpWra{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.loginWra .loginInpWra .inpWra .inpCon{
  width: 60%;
  height: 46px;
  margin: auto;
  border: 1px solid #999;
  border-radius: 12px;
  position: relative;
}
.loginWra .loginInpWra .inpWra .One img{
  width: 19px;
  height: auto;
  vertical-align: middle;
  position: absolute;
  left: 14px;
  top: 13px;
}
.loginWra .loginInpWra .inpWra .Two img{
  width: 17px;
  height: auto;
  vertical-align: middle;
  position: absolute;
  left: 14px;
  top: 12px;
}
.loginWra .loginInpWra .inpWra .inpCon input{
  vertical-align: top;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  height: 100%;
  padding-left: 50px;
  font-size: 18px;
  border-radius: 12px;
}
.loginWra .loginInpWra .inpWra .inpBtn{
  width: 60%;
  height: 50px;
  margin: auto;
  margin-top: 30px;
  cursor: pointer;
}
.loginWra .loginInpWra .inpWra .inpBtn img{
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.loginWra .loginInpWra .inpWra .One{
  margin-top: 50px;
}
.loginWra .loginInpWra .inpWra .Two{
  margin-top: 20px;
}
</style>

